<template>
	<div class="home app_content">
		<!-- 导航栏 -->
		<div class="header_body">
			<header-nav :leftArrow="false" titelText="协同办公"></header-nav>
		</div>

		<!-- 中间 -->
		<div class="warp_body">
      <van-cell :border="false" title="农机产品鉴定服务" />
      <van-grid clickable :column-num="2" style="margin-bottom: 10px">
        <van-grid-item :icon="One" text="证件管理" @click="goMenudetail({name: 'certificate'})"/>
        <van-grid-item :icon="Two" text="信息公开" @click="goMenudetail({name: 'information'})"/>
      </van-grid>
      <van-cell :border="false" title="功能" />
      <van-grid clickable :column-num="2">
        <van-grid-item v-for="item in menuList"
                       :key="item.meta.name"
                       :icon="item.meta.icon"
                       :text="item.meta.name"
                       @click="goMenudetail(item)"
        />
      </van-grid>
<!--        <div class="menu-list" v-for="item in menuList">-->
<!--          <div class="menu-item" v-if="item.meta">-->
<!--            <div>-->
<!--              <van-image src="" />-->
<!--            </div>-->
<!--            <van-cell :border="false" :title="item.meta.name" />-->
<!--&lt;!&ndash;            <div >{{ item.meta.name }}</div>&ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->
		</div>
	</div>
</template>

<script setup name="Home">
import { routes } from "@/router/cooperativeOffice"
import One from "@/assets/icon/cooperativeOffice/1.png"
import Two from "@/assets/icon/cooperativeOffice/2.png"
const menuList = ref(routes.filter(item => item.meta && item.meta.isMenu))
const router = useRouter();
const goMenudetail = (item) => {
  router.push(item);
};
</script>

<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.menu-list {
  display: flex;
}
.menu-item {
  text-align: center;
  width: 50%;
}
</style>
